<script setup lang="ts"></script>

<template>
  <div class="swiper-pages">
    <div class="content">
      <div class="problem">
        <h2 class="title">我们可以为您解决哪些问题</h2>
        <p class="desc">
          附属文字信息信息文字信息信息文字信息信息文字信息信息文字信息信息文字信息信息
        </p>
        <div class="problem-list">
          <div class="problem-item">
            <img src="/images/index/problem1.png" alt="" />
            <div class="item">
              <p class="item-title">标题文字</p>
              <p class="item-desc">服务商服务、商户服务服务</p>
            </div>
          </div>
          <div class="problem-item">
            <img src="/images/index/problem2.png" alt="" />
            <div class="item">
              <p class="item-title">标题文字</p>
              <p class="item-desc">服务商服务、商户服务服务</p>
            </div>
          </div>
          <div class="problem-item">
            <img src="/images/index/problem3.png" alt="" />
            <div class="item">
              <p class="item-title">标题文字</p>
              <p class="item-desc">服务商服务、商户服务服务</p>
            </div>
          </div>
          <div class="problem-item">
            <img src="/images/index/problem4.png" alt="" />
            <div class="item">
              <p class="item-title">标题文字</p>
              <p class="item-desc">服务商服务、商户服务服务</p>
            </div>
          </div>
        </div>
        <div class="problem-btn">快速上手接入</div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import "@/assets/scss/mixins.scss";

.swiper-pages {
  height: 100%;
  width: 100%;
  background-image: url("/images/index/banner2.png");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 1000px auto;
  box-sizing: border-box;

  .problem {
    margin-top: 148px;
    width: 513px;
    .title {
      font-weight: 700;
      font-size: 42px;
      color: #070a14;
    }
    .desc {
      margin-top: 24px;
      font-weight: 350;
      line-height: 35px;
      font-size: 24px;
      color: #7a7b7f;
      @include ellipsis(2);
    }
  }
  .problem-list {
    margin-top: 38px;
    display: flex;
    flex-wrap: wrap;
    .problem-item {
      display: flex;
      margin-bottom: 52px;
      &:nth-child(2n) {
        margin-left: auto;
      }

      img {
        width: 52px;
        height: 52px;
      }
      .item {
        margin-left: 16px;
        width: 160px;
        .item-title {
          font-weight: 500;
          font-size: 20px;
          color: #070a14;
        }
        .item-desc {
          margin-top: 2px;
          font-weight: 400;
          font-size: 16px;
          color: #7a7b7f;
        }
      }
    }
  }
  .problem-btn {
    font-weight: 500;
    font-size: 20px;
    color: #242424;
    width: 330px;
    height: 80px;
    background: #ffffff;
    border-radius: 0px 0px 0px 0px;
    border: 4px solid #242424;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    &:hover {
      border-color: #E12010;
    }
  }
}
</style>
